<template>
  <div class="mr-pr-topTable">
    <div>
      <el-button size="mini" type="primary" @click="handleQuery">查询</el-button>
    </div>
    <div>
      <ul>
      <li>
        <span>AO：</span>
        <el-input
          size="mini"
          v-model="searchInfo.aoNo"
          placeholder="请输入内容"
          style="width: 200px"
        ></el-input>
        <span>条码：</span>
        <el-input
          size="mini"
          v-model="searchInfo.barcode"
          placeholder="请输入内容"
          style="width: 200px"
        ></el-input>
        <span>图号：</span>
        <el-input
          size="mini"
          v-model="searchInfo.itemCode"
          placeholder="请输入内容"
           style="width: 200px"
        ></el-input>
        <span>质编：</span>
         <el-input
          size="mini"
          v-model="searchInfo.qualityCode"
          placeholder="请输入内容"
           style="width: 200px"
        ></el-input>
      </li>
    </ul>
    </div>
    <div class="mr-pr-firstTable">
      <el-table
      size="mini"
      :data="resData"
      style="width: 100%"
      height="258"
      highlight-current-row
      :cell-style="cellStyle"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40"> </el-table-column>
      <el-table-column type="index" label="序号" width="50"  :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="barcode" label="条码" width="110" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="aoNo" label="AO" width="110" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="deliveryStatus" label="移交状态" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="productCode" label="机型编码" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="batchNo" label="批次" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="startLotNo" label="起始架次"  :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="itemCode" label="物料编码" width="170" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="qualityCode" label="质量编号" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="returnQty" label="退回数量" :show-overflow-tooltip="true"> </el-table-column>
      <!-- <el-table-column prop="mdsUnit" label="计量单位" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="itemType" label="物料大类" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="attribute18" label="制造单位" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="empName" label="移交人" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="deliveryDate" label="移交时间" width="150" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="receiveRemark" label="备注" :show-overflow-tooltip="true"> </el-table-column> -->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNumber"
      :page-sizes="[10,20,50,100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
    </div>
  </div>
</template>
<script>
import { returnReceTopTable } from "@/utils/api.js";

export default {
  name: "PrTables",
  data() {
    return {
      //查询条件
      searchInfo:{
        aoNo:'',
        itemCode:'',
        qualityCode:'',
        barcode:''
      },
      //
      isIndex: true,
      // 表页一表一
      // 表一数据总数
      totalCount: 0,
      // 表一每页数据个数
      pageSize: 10,
      // 当前页数
      pageNumber: 1,
      resData: [],
      tableDtata: [],
    };
  },
  methods: {

    //查询
     handleQuery(){
      returnReceTopTable({
        searchParams: {
            qualityCode: this.searchInfo.qualityCode,
            aoNo: this.searchInfo.aoNo,
            barcode:this.searchInfo.barcode,
            itemCode:this.searchInfo.itemCode
          },
        pageParameter: {
          rows: this.pageSize,
          page: this.pageNumber,
        }
      }).then((res)=>{
        // 将条件查找的数据传给Table
        // this.$bus.$emit("ImTiSearchData", res.data.responseBody);
        this.resData = res.data.responseBody.result;
        this.totalCount = res.data.responseBody.pageParameter.totalCount;
        console.log("退货查询Search", res);
        if(res.data.retCode == 201) {
          this.$Alert({
            title: "失败",
            message: res.data.message,
            type: "error",
          });
        }
      })
    },
    // 勾选函数
    handleSelectionChange(val){
      this.$bus.$emit('returnReceTtableCheak',val)
      // console.log('勾选',val)
    },
    // 选择每页条数后请求接口更新表格
    handleSizeChange(val) {
      this.pageSize = val
      returnReceTopTable({
         searchParams: {            
            aoNo: this.searchInfo.aoNo,
            qualityCode: this.searchInfo.qualityCode,
            barcode:this.searchInfo.barcode,
            itemCode:this.searchInfo.itemCode
          },
        pageParameter: {
          rows: this.pageSize,
          page: this.pageNumber,
        }
      }).then((res) => {
        this.resData = res.data.responseBody.result;
        this.totalCount = res.data.responseBody.pageParameter.totalCount;
        // this.$options.methods.cellStyle.bind(this)()
      });
      // 传pageSize，pageNumber给midSearch
      this.$bus.$emit('returnRecePageNumbers',{pageSize:this.pageSize,pageNumber:this.pageNumber})
      // console.log(`每页 ${val} 条`);
    },
    // 分页函数
    handleCurrentChange(val) {
      this.pageNumber = val;
        returnReceTopTable({
           searchParams: {
            aoNo: this.searchInfo.aoNo,
            qualityCode: this.searchInfo.qualityCode,
            barcode:this.searchInfo.barcode,
            itemCode:this.searchInfo.itemCode
          },
          pageParameter: {
            rows: this.pageSize,
            page: this.pageNumber,
          }
      }).then((res) => {
        this.resData = res.data.responseBody.result;
        this.totalCount = res.data.responseBody.pageParameter.totalCount;
        // this.$options.methods.cellStyle.bind(this)()
      });
    },
    // 好像这个函数没有用 暂时未删除
    myclass(val){
      // console.log(val)
      if(val.row.isCoor == '协调中' && val.row.isCoor == '申请归零'){
        return 'background-color:red'
      }
    },
    cellStyle(val){
      // console.log(val.row.isCoor)
      if(val.row.isCoor == '协调中' || val.row.isCoor == '申请归零'){
        return 'background-color:red'
      }
    }
  },
  watch: {
  },
  mounted() {
    
    returnReceTopTable({
           searchParams: {
            aoNo: this.searchInfo.aoNo,
            qualityCode: this.searchInfo.qualityCode,
            barcode:this.searchInfo.barcode,
            itemCode:this.searchInfo.itemCode
          },
          pageParameter: {
            rows: this.pageSize,
            page: this.pageNumber,
          }
      }).then((res) => {
        console.log('退库接收上表',res)
        this.resData = res.data.responseBody.result;
        this.totalCount = res.data.responseBody.pageParameter.totalCount;
        // this.$options.methods.cellStyle.bind(this)()
        this.$bus.$emit('returnReceiveTopTable',this.resData)
      })
     this.$bus.$on('refreshReturnReceTopTable',(e)=>{
      returnReceTopTable({
          searchParams: {
            aoNo: this.searchInfo.aoNo,
            qualityCode: this.searchInfo.qualityCode,
            barcode:this.searchInfo.barcode,
            itemCode:this.searchInfo.itemCode
          },
          pageParameter: {
            rows: this.pageSize,
            page: this.pageNumber,
          }
      }).then((res) => {
        this.resData = res.data.responseBody.result;
        this.totalCount = res.data.responseBody.pageParameter.totalCount;
        // this.$options.methods.cellStyle.bind(this)()
        this.$bus.$emit('returnReceiveTopTable',this.resData)
      })
     })
  }
};
</script>
<style scoped>
.mr-pr-topTable {
  width: 100%;
  height: 100%;
}
.mr-pr-firstTable {
  text-align: center;
}
.el-table--enable-row-hover .el-table_body tr:hover>td {
  background-color: red !important;
}
</style>